<template>
  <scroll-view scroll-y class="scroll-view">
    <view class="detail">
      <text class="content">书名：{{ detail.name }}</text>
      <rich-text :nodes="detail.remark" class="uni-h6 content">简介：</rich-text>
      <text class="content">{{ detail.publish_date }}</text>
      <button @tap="onClickDownBook(detail.file)" size="mini" type="primary">下载</button>
    </view>
  </scroll-view>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import type { HandpickedBookItem } from '@/types/home'
import { download } from '@/utils/http'

const detail = reactive<HandpickedBookItem>({
  id: 0,
  name: '',
  remark: '',
  cover: '',
  file: '',
  author: '',
  publish_date: '',
  remark_short: '',
})
// 页面加载
onLoad(async (opts: any) => {
  detail.name = decodeURIComponent(opts.name)
  detail.remark = decodeURIComponent(opts.remark)
  detail.file = decodeURIComponent(opts.file)
  detail.publish_date = decodeURIComponent(opts.publish_date)
})
const onClickDownBook = (url: string) => {
  uni.showLoading({
    title: '下载中...',
  })
  download(url)
}
</script>

<style lang="scss" scoped>
.scroll-view {
  flex: 1;
}

.detail {
  display: flex;
  flex-flow: column wrap;
  margin: 2rpx;
  padding: 1rpx;
  font-size: 29rpx;

  .item-title {
    color: green;
  }
}

.detail-item {
  margin: 10rpx;
}
</style>
